<template>
  <div class="menu">
    <el-button icon="el-icon-circle-plus" class="add" type="danger" @click="add"
      >添加</el-button
    >
    <list ref="list" :msg="msg" @update="update" @edit="edit"></list>
    <info ref="info" :msg="msg" @update="update"></info>
  </div>
</template>

<script>
import list from "./list.vue";
import info from "./info.vue";

import {getAdminListApi,getRoleListApi} from '../../api'

export default {
  data() {
    return {
      // 要传给子组件的数据
      msg: {
        // 弹窗是否显示
        isShow: false,
        // 弹窗的类型
        type: "add",
        tableData:[],
        roleList:[
          
        ]
      },
    };
  },
 
  created() {
    // 发请求,
    this.getAdminList();
    this.getRoleList();
  },
  components: {
    list,
    info,
  },
  methods: {
    // 弹窗开关
    // toggle(){
    //   this.msg.isShow = !this.msg.isShow;
    // },
    add() {
      // 打开弹窗
      this.msg.isShow = true;
      // 添加
      this.msg.type = "add";
      // 在父组件中通过ref调用子组件的方法
      this.$refs.info.setVal({
        pid: 0,
        title: "",
        icon: "",
        type: 1,
        url: "",
        status: 1,
      });
    },
    edit(info) {
      // console.log('index中的info',info);
      this.msg.isShow = true;
      // 弹窗类型是编辑
      this.msg.type = "edit";
      this.$refs.info.setVal(info);
    },
    update() {
      // 更新列表数据
      this.getAdminList();
    },
    async getAdminList() {
      let res = await getAdminListApi();
      this.msg.tableData = res.list;
    },
    async getRoleList() {
      let res = await getRoleListApi();
      this.msg.roleList = res.list;
    },





  },
};
</script>

<style>
.menu {
  text-align: left;
}
</style>